import { Link, NavLink } from 'react-router-dom'
import './style.css'

export interface NoteType {
	id: number
	title: string
	content: string
	likes: number
}

const NoteList = ({ notes }: { notes: NoteType[] }) => {
	return (
		<nav className='noteList'>
			{notes.map(note => (
				<div key={note.id} className='note'>
					{/* 使用Link好处:
          1 可以使用相对路径
          2 可以成为客户端路由 */}
					{/* <Link to={`notes/${note.id}`}>{note.title} </Link> */}
					<NavLink
						to={`notes/${note.id}`}
						// 对导航进行高亮显示
						className={({ isActive, isPending }) => (isActive ? 'active' : isPending ? 'pending' : '')}
					>
						{note.title}{' '}
					</NavLink>
					<p className='contentExerpt'>{note.content.substring(0, 20) + '...'}</p>
				</div>
			))}
		</nav>
	)
}

export default NoteList
